<template>
  <div class="login-container">
    <!-- 
      el-form 表单组件
      每个表单项都必须使用 el-form-item 组件包裹
      1、配置 Form 表单验证
      (1) 必须给 el-form 组件绑定 model 为表单数据对象
      (2) 给需要验证的表单项 el-form-item 绑定 prop 属性
          注意：prop 属性需要指定表单对象中的数据名称
      (3) 通过 el-form 组件的 rules 属性配置验证规则
      (4) 手动触发表单验证：
         -- 给 el-form 设置 ref 起个名字(，随便起，不重复即可)
         -- 通过 ref 获取 el-form 组件，调用组件的 validate() 进行验证
     -->
    <el-form 
      class="login-form" 
      ref="loginForm" 
      :model="user" 
      :rules="rules"
      @keyup.enter.native="onLogin">
      <div class="login-header">头条管理系统</div>
      <el-form-item prop="name" >
        <el-input 
          prefix-icon="el-icon-user"
          v-model="user.name"
          placeholder="请输入手机号">
        </el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input
          prefix-icon="el-icon-lock"
          v-model="user.pass"
          placeholder="请输入登录密码">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button 
          class="loginBtn"
          type="primary" 
          :loading="loginLoading"
          @click="onLogin">
          登录
        </el-button>
      </el-form-item>
      <el-form-item>
        <u>
          <div><span @click="goRegister">还没有账号？立即注册</span></div>
        </u>
      </el-form-item>
    </el-form>
  </div>  
</template>

<script>
import { userLogin } from '@/api/user'
  export default {
    name: 'LoginIndex',
    components: {  },
    data() {
      return {
        user: {
          name: '15891211111',        // 手机号
          pass: '123456'              // 验证码
        },
        // checked: false,            // 是否同意协议的选中状态
        loginLoading: false,          // 登录的 loading 状态
        rules: {
          // 表单验证规则配置
          // 要验证的数据名称：规则列表[]
          name: [
            { required: true, message: '手机号不能为空!', trigger: 'change' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号格式！', trigger: 'change' }
          ],
          pass: [
            { required: true, message: '验证码不能为空!', trigger: 'change' },
            { pattern: /^\d{6}$/, message: '请输入正确的验证码格式！', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      // 登录
      onLogin () {
        // 获取表单数据(根据接口要求绑定数据)
        // const user = this.user
        // 表单验证 validate() 是异步的
        this.$refs['loginForm'].validate(valid => {
          if (valid) {
            userLogin(this.user).then(({ data }) => {
              // 账号不存在
              if (data.info === false) {
                this.$message({
                  type: 'info',
                  message: '账号不存在！'
                })
                return
              }
              // 账号存在
              if (data.success) {
                // 登录成功
                this.$message({
                  message: '登录成功！',
                  type: 'success'
                })
                // 拿到刚返回的 token 和 username， 并存到 store
                let token = data.token
                let username = data.username
                this.$store.dispatch('UserLogin', token)
                this.$store.dispatch('UserName', username)
                // 跳转到首页
                this.$router.push('/')
              }
            })
          } else { // 如果表单验证失败,停止请求提交
            console.log('error submit')
            return false
          }
        })
      },
      goRegister() {
        this.$router.push('/register')
      }
    }
  }
</script>

<style scoped>
  .login-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: url("./login_bg.jpg") no-repeat;
    background-size: cover;
  }
  .login-header {
    font-size: 30px;
    margin-bottom: 30px;
    color: #049EFF;
    font-weight: bold;
    text-align:center;
  }
  .login-form {
      background-color: #fff;
      padding: 50px;
      min-width: 300px;
    }
  .loginBtn {
    width: 100%;
    margin-top: 20px;
  }
  u {
    color: red;
    text-align: center;
  }
</style>